import React from "react";
import { Breadcrumb } from 'antd'
import { useLocation, Link } from 'react-router-dom'

/**
 *  面包屑导航渲染组件
 *  Author/作者 : YuBing 羽冰
 *    time     : 2021.4.12
 *  组件参数 :
 *    1. style 面包屑样式,可选
 *    2. setting 面包屑渲染路径显示修改
 *        结构: [{name,show},{name,show},···]
 *              其中 name 为原本的根据路径渲染的英文
 *              show 为想要替换英文渲染出来的效果(比如将英文显示替换为中文显示)
 *        例子 : 
 *            替换前 --->  ManagerIndex/Index   
 *            替换后 --->  系统首页/首页
 *          对应的结构: 
 *            [{name:"ManagerIndex",show:"系统首页"},{name:"Index",show:"首页"}]
 */

const BreadCrumbCreator = props => {
  let locationArr = useLocation().pathname.split("/");
  locationArr.shift();

  let setPath = element => {
    let arr = locationArr.slice();
    arr.splice(locationArr.indexOf(element) + 1)
    return ("/" + arr.join("/"))
  }
  
  let setBreadCrumbItem = setting => (
    locationArr.map(item => (
      <Breadcrumb.Item key={item}>
        <Link to={setPath(item)} key={item}>
          {
            setting ?
              setting.find(element => element.name === item).show
              :
              item
          }
        </Link>
      </Breadcrumb.Item>
    ))
  )

  return (
    <Breadcrumb style={props.style ? props.style : {}}>
      {setBreadCrumbItem(props.setting)}
    </Breadcrumb>
  )
}

export default BreadCrumbCreator;